<template>
  <div class="header">
<!--    <div>
      <router-link to="/">
        <img src="/images/cart/logo1.jpg" alt="">
        &lt;!&ndash; 图片 &ndash;&gt;
        &lt;!&ndash; <img src="" alt=""> &ndash;&gt;
      </router-link>
    </div>-->
    <div class="headerButton">
      <el-steps :active="active" finish-status="success" :space=500>
        <el-step title="我的购物车" />
        <el-step title="核对该商品" />
        <el-step title="已成功提交" />
      </el-steps>
    </div>
  </div>
</template>

<style lang="less" scoped>





.header{
    display: flex;
   align-items:center;
   padding:28px 0;
   height: 30px;
     box-shadow: 0 2px 7px 0 rgb(0 0 0 / 10%);
   img{
     margin-left:150px ;
     width: 200px;
     height: 60px;
   }
    .headerButton{
      margin-left: 69%;
    } 
 }//.is-process
 ::v-deep .el-step__head {
  width:150px;
 }
 ::v-deep .el-step__head {
width: 150px;
 }
//.is-wait
</style>



<script setup>
import PubSub from 'pubsub-js'
import { ref,onMounted } from 'vue'

const active = ref(0)

const next = () => {
  if (active.value++ > 2) active.value = 0
}
onMounted(()=>{
  var token = PubSub.subscribe('item', (item,index)=>{
active.value=index
  });
})

</script>